<template>
    <panel title="商品分类">
        <el-button type="primary" slot="btn" >添加商品</el-button>
          <el-table
            :data='cateList'
            style="width: 100%">

            <el-table-column
            label="序号"
            prop="id">
            </el-table-column>

            <el-table-column
            label="分类名">
            <template slot-scope="scope">
              <span v-if="scope.row.isedit===false">{{scope.row.cateName}}</span>
              <el-input v-model="scope.row.cateName" v-else></el-input>
            </template>
            </el-table-column>

            <el-table-column
            label="是否启用"
            prop="state">
            <template slot-scope="scope">
                <el-switch
                    :active-value='1'
                    :inactive-value='0'
                    :disabled="!scope.row.isedit"
                    v-model="scope.row.state"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </template>
            </el-table-column>

            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    v-if="scope.row.isedit === false"
                    @click="edit(scope.row)"
                    >编辑</el-button>
                    <el-button v-else @click="submit(scope.row)">完成</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                   
                    >删除</el-button>
                </template>
            </el-table-column>
            </el-table>
                <el-pagination
                @current-change="pageChange"
                :current-page="pageinfo.currentPage"
                :page-size="pageinfo.pageSize"
                @size-change="sizeChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
        
    </panel>
        
</template>

<script>
import { goodscatelistReq, editcateReq } from "../../api/goods.api.js";

export default {
  data() {
    return {
      pageinfo: {
        currentPage: 1,
        pageSize: 5
      },
      total:0,
      cateList: []
      // 定义一个数据
      // isedit: false
    };
  },
  methods: {
    // 每页多少条
    sizeChange(pageSize) {
      this.pageinfo.pageSize = pageSize;
      console.log(this.pageinfo.pageSize);
      
      this.getlist();
    },

    // 页码的改变
    pageChange(currentPage) {
      // 改变页码
      this.pageinfo.currentPage = currentPage;
      this.getlist();
    },
    submit(row) {
      // 提交给后台
      editcateReq(row).then(res => {
        if (res.data.code === 0) {
          this.$message.success("修改成功");
          // 查询数据
          row.isedit = false;
        }
      });
    },
    // 点击编辑
    edit(row) {
      row.isedit = true;
    },
    async getlist() {
      const res = await goodscatelistReq(this.pageinfo);
      // 循环res.data.data，给每一项增加一个字段：isedit
      res.data.data.forEach(item => {
        item.isedit = false;
      });
      this.cateList = res.data.data;
      console.log(this.cateList);
    }
  },
  created() {
    this.getlist();
  },
  watch: {
    cateList: {
      handler: function() {},
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
</style>